<template>
  <div class="detail-header">
    <flexbox
      align="center"
      justify="flex-start"
      class="header-control">
      <div
        :style="{backgroundColor: iconColor}"
        class="icon-box">
        <i :class="icon" />
      </div>
      <flexbox-item
        style="margin-left: 0;"
        class="info">
        <div class="type-name">
          {{ typeName }}
        </div>
        <div class="mini-title">
          {{ label }}
          <template v-if="detailData.hasOwnProperty('state') && detailData.state == 6">
            <span class="invalid-text">
              （已作废）
            </span>
          </template>
        </div>
      </flexbox-item>
      <template v-if="btnGroup && btnGroup.length > 0">
        <el-button
          v-for="(btn, index) in btnGroup"
          :key="index"
          :icon="btn.icon || ''"
          :type="btn.type || ''"
          :class="btn.btnClass"
          @click="handleBtnClick(btn.command)">
          {{ btn.btnText }}
        </el-button>
      </template>

      <el-dropdown
        v-if="moreBtnGroup && moreBtnGroup.length > 0"
        trigger="click"
        @command="handleBtnClick">
        <el-button
          icon="el-icon-more"
          class="t-more" />
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, index) in moreBtnGroup"
            :key="index"
            :icon="item.icon | wkIconPre"
            :command="item.command">
            {{ item.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </flexbox>

    <flexbox class="info-container">
      <flexbox-item
        v-for="(item, index) in baseInfo"
        :key="index"
        class="info-item"
        span="200">
        <div class="info-item-title">
          {{ item.title }}
        </div>
        <div
          :style="{ color: item.color }"
          class="info-item-value">
          {{ item.value }}
        </div>
      </flexbox-item>
    </flexbox>
  </div>
</template>

<script>
import { separator } from '@/filters/vueNumeralFilter/filters'

export default {
  name: 'DetailHeader',
  props: {
    typeName: String, // 类型名称
    label: String, // 小标题
    icon: String, // 图标
    iconColor: String, // 图标颜色
    btnGroup: { // 操作按钮组
      type: Array,
      default: () => []
    },
    moreBtnGroup: { // 更多按钮组
      type: Array,
      default: () => []
    },
    detailData: { // 详情数据
      type: Object,
      default: () => {}
    },
    fields: { // 头部首要信息字段
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  computed: {
    /**
     * 详情头部信息字段格式化
     * @return {[]|*[]}
     */
    baseInfo() {
      const res = []
      /**
       * {
       *   fieldName: String, 字段名
       *   field: String, 字段
       *   color: String, 颜色
       *   colorFormat: Function|null, // 颜色格式化函数
       *   valueFormat: Function|Null // 字段值格式化函数
       *   isMoneyField: false
       * }
       */
      this.fields.forEach(item => {
        let value = this.detailData[item.field]
        let color = item.color || ''
        if (item.colorFormat && typeof item.colorFormat === 'function') {
          color = item.colorFormat({
            field: item.field,
            value: value
          })
        }
        if (item.isMoneyField) {
          value = separator(value || 0)
        } else if (item.valueFormat && typeof item.valueFormat === 'function') {
          value = item.valueFormat({
            field: item.field,
            value: value
          })
        }

        res.push({
          title: item.fieldName,
          value: value,
          color: color
        })
      })
      return res || []
    }
  },
  methods: {
    handleBtnClick(command) {
      this.$emit('command', command)
    }
  }
}
</script>

<style scoped lang="scss">
  .detail-header {
    width: 100%;
    background-color: white;
    border-bottom: 1px solid $xr-border-color-base;
    .header-control {
      width: 100%;
      padding: 30px 20px 5px;

      .icon-box {
        width: 40px;
        height: 40px;
        color: white;
        text-align: center;
        line-height: 40px;
        border-radius: $xr-border-radius-base;
        margin-right: 15px;
        i {
          font-size: 20px;
        }
      }

      .info {
        .type-name {
          font-size: 12px;
          color: #999;
          margin-bottom: 5px;
        }
        .mini-title {
          font-size: 16px;
          font-weight: 600;
          color: $xr-color-text-primary;
          .invalid-text {
            color: #ccc;
          }
        }
      }

      .el-dropdown {
        margin-left: 8px;
      }
    }

    .info-container {
      padding: 8px 20px 15px;
      .info-item {
        .info-item-title {
          font-size: 12px;
          color: #666;
        }
        .info-item-value {
          min-height: 14px;
          margin-top: 8px;
          font-size: 13px;
          color: #333;
          padding-bottom: 2px;
        }
      }
    }
  }
</style>
